import { Swiper, Button, SwiperRef } from "antd-mobile"
import './gg.scss'
import { useLocalStorageState, useCookieState } from 'ahooks'
import { Dao } from "../../components/dao"
import { useTiaoZhuan } from "../../hooks/routers"
import { useState, useRef, useLayoutEffect,useEffect } from 'react'
import useGetYearWeek from "../../hooks/week"
import { getImg } from "../../api/test"
export const Guanggao = () => {
    // 跳转路由
    const { Tz } = useTiaoZhuan()
    const [res, setRes] = useState<getImgs[]>([] as getImgs[])
    const [flag, setflag] = useState<number>(0)

    // 使用localStorage
    const [stateWeek, setStateWeek] = useLocalStorageState<string | undefined>(
        'weeks',
    );
    // 使用cookie
    const [value, setValue] = useCookieState('useCookieStateOptions', {
        expires: (() => new Date(+new Date() + 7 * 24 * 60 * 60 * 1000))(),
    });
    // 获取轮播图的ref
    const SwpersRef = useRef<SwiperRef>({} as SwiperRef)
    const [week] = useGetYearWeek();



    // 切换轮播图触发
    const changes = (index: number) => {
        setflag(index)
        // SwpersRef.current.swipeTo(3)
        console.log(index);
    }
    // 获取图片的异步请求
    const getImgs = async () => {
        let datas = await getImg()
        console.log(datas);
        setRes(datas.result)

    }
    // 在渲染页面之前
    useLayoutEffect(() => {
        // if(stateWeek){
        //     if(week.toString() == stateWeek){
        //         Tz('/homes')   
        //     }else{
        //         setStateWeek(week.toString())
        //     }
        // }else{
        //     setStateWeek(week.toString())
        // }

        if (value) {
            Tz('/homes')
        } else {
            // 更改当前的七天一次广告日期
            setValue(week.toString())
            // 获取轮播图片

        }
    }, [])

    useEffect(()=>{
        getImgs();

    },[])
    return (
        <div style={{ overflow: 'hidden' }}>
            <Dao
                onEnd={() => { }
                }
                style={{ color: 'black' }}
                total={10}
            />

            <div style={{ marginTop: '100px' }}>
                <Swiper
                    indicator={(total, current) => (
                        <div className='customIndicator'>
                            {`${current + 1} / ${total}`}
                        </div>
                    )}
                    loop
                    autoplay
                    onIndexChange={changes}
                    ref={SwpersRef}
                >
                    {res.map((item, index) =>
                        <Swiper.Item key={index}>
                            <img src={item.imgurl.replace('public', 'http://101.37.23.156:3333')} alt=""  className="content"/>
                        </Swiper.Item>
                    )}
                </Swiper>

            </div>

            {flag == res.length - 1 && <Button color='danger' style={{ margin: "50px auto", display: 'block' }}>Danger</Button>}
        </div>
    )
}